<template>
  <div id="my" v-loading="loading">
    <div class="address">
      您的钱包地址：<a v-bind:href="explorer + 'address/' + address" target="_blank">{{ address }}</a>
    </div>
    <TaskDetail ref="taskdetail" :task="showedTask" />
    <el-tabs type="border-card">
      <el-tab-pane label="我创建的悬赏">
        <div>
          <TaskItem v-for="task in tasks" :key="task.txhash" :task="task" @showdetail="showDetail" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="我领取的悬赏">
        <div>
          <TaskItem v-for="task in finished" :key="task.txhash" :task="task" @showdetail="showDetail" />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import Vue from 'vue';
  import util from '../util';
  import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
  import TaskItem from './TaskItem'
  import TaskDetail from './TaskDetail'

  export default {
    components: {
      TaskItem,
      TaskDetail,
      ElButton},
    name: 'index',
    data () {
      return {
        address: '',
        loading: false,
        success: false,
        tasks: [],
        finished: [],
        explorer: util.config.explorer,
        showedTask: {}
      }
    },
    created() {
      this.getAddress();
      this.loadTask();
      this.loadFinished();
    },
    methods: {
      getAddress() {
        if(typeof(webExtensionWallet) === "undefined"){
          return;
        }

        window.postMessage({
          "target": "contentscript",
          "data":{},
          "method": "getAccount",
        }, "*");

        window.addEventListener('message', (e)=>{
          if(e.data && e.data.data && e.data.data.account){
            this.address = e.data.data.account;
          }
        });
      },
      showDetail(task) {
        this.showedTask = task;
        this.$refs.taskdetail.show();
      },
      loadTask() {
        this.loading = true;
        util.nebPay.simulateCall(
          util.config.dappaddr,
          '0',
          'getUserTasks',
          '',
          {
            listener: (data) => {
              this.loading = false;
              if (data.execute_err && data.execute_err == 'contract check failed') {
                this.$alert('请确认钱包插件网络为「Mainnet」，切换后刷新重试', '网络错误', {
                  confirmButtonText: '确定'});
              } else {
                var result = JSON.parse(data.result);
                var data = result.data;
                for (var index in data) {
                  this.tasks.push(data[index]);
                }
              }
            }
          }
        );
      },
      loadFinished() {
        util.nebPay.simulateCall(
          util.config.dappaddr,
          '0',
          'getUserTasks',
          '["1"]',
          {
            listener: (data) => {
              if (data.execute_err && data.execute_err == 'contract check failed') {
                this.$alert('请确认钱包插件网络为「Mainnet」，切换后刷新重试', '网络错误', {
                  confirmButtonText: '确定'});
              } else {
                var result = JSON.parse(data.result);
                var data = result.data;
                for (var index in data) {
                  this.finished.push(data[index]);
                }
              }
            }
          }
        );
      }
    }
  };
</script>

<style>
  .address {
    padding: 10px 10px 10px 10px;
  }

</style>
